import * as React from "react";
import { Dimensions, View, Text, StyleSheet } from "react-native";
import Carousel from "react-native-snap-carousel";
import { carouselList } from "./data";

export default class MyCarousel extends React.Component {
  _renderItem({ item, index }) {
    return (
      <View style={styles.slide}>
        <Text style={styles.title}>{item.title}</Text>
        <Text style={styles.desc}>{item.subtitle}</Text>
      </View>
    );
  }

  render() {
    const { width: viewportWidth, height: viewportHeight } = Dimensions.get(
      "window"
    );
    const autoplay = true;
    return (
      <Carousel
        ref={c => {
          this._carousel = c;
        }}
        data={carouselList}
        renderItem={this._renderItem}
        autoplay={autoplay}
        loop={autoplay}
        sliderWidth={viewportWidth}
        itemWidth={viewportWidth}
      />
    );
  }
}

const styles = StyleSheet.create({
  slide: {
    width: "100%",
    height: 300,
    backgroundColor: "#996666",
    paddingTop: 30
  },

  title: {
    fontSize: 16,
    color: "#CCCCCC",
    textAlign: "center",
    height: 100,
    lineHeight: 100
  },
  desc: {
    fontSize: 12,
    textAlign: "center",
    color: "#fff"
  }
});
